import React, { Component } from "react";
import SelectSearch from "../components/common/selectSearch";
import OmsDate from "../components/common/omsDatePicker";
import OmsPagination from "../components/common/pagination";
import { Link } from "react-router-dom";
import _Http from "../../config/api";
import {Notice} from '../../config/omsLayer';
import './home.css';
export default class Home extends Component{
  constructor(props){
    super(props);
    this.state = {
      tableDate:[]
    }
    this.updateTableDate= this.updateTableDate.bind(this);
  }

  updateTableDate(newVal){
    var _this = this;
    _this.setState({tableDate:newVal});
  }

  loopTr(date){
    var tempArrayList =  date.map((el, index) =>{
        return <tr key={index}>
                  <td>{el.zhanDian}</td>
                  <td>{el.order}</td>
                  <td>{el.keHu}</td>
                  <td>{el.shouGongFei}</td>
                  <td>{el.qiTaFei}</td>
                  <td>{el.peiJianFei}</td>
                  <td>{el.yunFei}</td>
              </tr>
      });
    
    return tempArrayList;
  }

  componentDidMount() {
    var _this = this,
        langIndex = _this.props.langKey;

     _Http.get('/orders/GetBatchOrderList.php')
      .then(function (res) {
        _this.updateTableDate(res.data.list);
      })
      .catch(function (error) {
        Notice.errorTips(error[langIndex]);
      });
  }

  componentWillUnmount(){// 组件即将销毁
    Notice.closeAll();
 }
 
  render(){
    var _this = this,
    langIndex = _this.props.langKey,
    translate = {
      cn:{
        "首页管理" : "首页管理",
        "公告" : "公告",
        "标题" : "标题",
        "状态" : "状态",
        "创建日期" : "创建日期",
        "操作" : "操作",
        "快捷菜单" : "快捷菜单",
        "工作通知":"工作通知"
      },
      en:{
        "首页管理" : "Home Manange",
        "公告" : "Announcement",
        "标题" : "Title",
        "状态" : "Status",
        "创建日期" : "Create At",
        "操作" : "Option",
        "快捷菜单" : "Shortcut Menu",
        "工作通知":"Work Notice"
      }
   },
   tableDate = _this.state.tableDate,
   page = translate[langIndex];
    return(
      <div id="content">
          <div className="page-header">
            <div className="container-fluid">
              <h1>{page['首页管理']}</h1>
            </div>
          </div>
          <div id="contents" className="container-fluid">
            <div className="panel panel-default">
              <div className="panel-heading">
                <h3 className="panel-title"><i className="fa fa-bullhorn"></i>{page['公告']}</h3>
              </div>
              <div className="panel-body">
                <table className="table table-bordered table-hover text-center">
                  <thead>
                    <tr>
                      <td>{page['标题']}</td>
                      <td>{page['状态']}</td>
                      <td>{page['创建日期']}</td>
                      <td>{page['操作']}</td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>质检单的批量录入功能优化介绍</td>
                      <td>已读</td>
                      <td>2017-12-10 22:03:52</td>
                      <td><Link to="system/notice/detail?id=19" className="viewDetail">查看详情</Link></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div className="panel panel-default">
              <div className="panel-heading">
                <h3 className="panel-title"><i className="fa fa fa-th"></i>{page['快捷菜单']}</h3>
              </div>
              <div className="table-responsive shortcutMenu clearfix">
                <div className="col-lg-2 col-md-4 col-sm-6">
                  <div className="tile">
                    <Link to='/orders/Order_new/index' className="tile-body"><i className="fa fa-hand-pointer-o"></i><span className="pull-right">零散单列表</span></Link>
                  </div>
                </div>
              </div>
            </div>
            <div className="panel panel-default">
              <div className="panel-heading">
                <h3 className="panel-title"><i className="fa fa-bell"></i>{page['工作通知']}</h3>
              </div>
              <div className="table-responsive clearfix">
                <div className="col-lg-2 col-md-4 col-sm-6">
                  <Link to='/orders/MyOrder/stayRepair?userid=179' className="tile"><span className="tile-heading">零散单确认报价</span> <span className="tile-body"><i className="fa fa-asl-interpreting"></i> <span className="pull-right subTitle">877</span></span></Link>
                </div>
                <div className="col-lg-2 col-md-4 col-sm-6">
                <SelectSearch></SelectSearch>
                </div>
                <div className="col-lg-2 col-md-4 col-sm-6">
                <SelectSearch isMulti={true}></SelectSearch>
                </div>
                <div className="col-lg-2 col-md-4 col-sm-6">
                    <br/>
                    <input className="form-control" id="lihongye" type="text"/>
                    <br/>
                    <OmsDate dataConfig={{placeholderText:'开始时间',name:'liohngye1'}}></OmsDate>
                  <br/><br/>
                  <OmsDate></OmsDate>

                </div>
              </div>
             
            </div>
            <div className="panel panel-default">
              <div className="panel-heading">
                <h3 className="panel-title"><i className="fa fa-bell"></i>{page['工作通知']}</h3>
              </div>
              <div className="panel-body">
    
                <table className="table table-bordered table-hover">
                      <thead>
                          <tr>
                              <td>站点</td>
                              <td>订单号</td>
                              <td>客户</td>
                              <td>手工费</td>
                              <td>其它费</td>
                              <td>配件费</td>
                              <td>运费</td>
                          </tr>
                      </thead>
                      <tbody>
                          {tableDate.length?_this.loopTr(tableDate):<tr><td className="emptyNumber" colSpan="7">没有更多的数据</td></tr>}
                      </tbody>
                  </table>  
                  {tableDate.length?<OmsPagination updateDate={_this.updateTableDate} pageConfig={{total:200,curr:1,per:15,url:'/orders/GetBatchOrderList.php'}}></OmsPagination>:''}
              </div>
             
            </div>
          </div>
        </div>
    );
  }
}